<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="setBtn">新增</button>
    <button class="getBtn">获取</button>

</body>
<script type="module">
    // cookie的注意事项
    // 1. cookie要依赖于服务器环境
    // 2. cookie不能跨网站
    // 3. cookie不能跨浏览器
    // 4. cookie存储中文时可能会乱码  
    //    存cookie之前 对中文进行编码    encodeURIComponent()  对中文和特殊符号进行编码
    //    取cookie之后 对编码的中文进行解码  decodeURIComponent() 对中文和特殊符号进行解码
    // 5. cookie的本质是字符串 -> 存储其他类型会隐式转化为字符串(存储数组和对象 可能会有问题)
    //     存cookie之前 将数组和对象转化为JSON字符串
    //     取cookie之后 将JSON字符串还原为数组和对象




    import { setCookie, getCookie } from "../js/cookie.js";

    var setBtn = document.getElementsByClassName("setBtn")[0];
    var getBtn = document.getElementsByClassName("getBtn")[0];

    setBtn.onclick = function () {
        setCookie("user", "a123123", 31 * 24 * 60 * 60);
        setCookie("pwd", "123123");
        setCookie("phone", "17386141517", 7 * 24 * 60 * 60);
        setCookie("email", "123123@qq.com", 24 * 60 * 60);

        setCookie("msg", encodeURIComponent("你好"));

        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2 };

        setCookie("arr", JSON.stringify(arr))
        setCookie("obj", JSON.stringify(obj))

    }


    getBtn.onclick = function () {
        console.log(getCookie("user"));
        console.log(getCookie("pwd"));
        console.log(getCookie("phone"));
        console.log(getCookie("email"));

        var enStr = getCookie("msg");
        console.log(decodeURIComponent(enStr));

        var enArr = getCookie("arr");
        var enObj = getCookie("obj");
        console.log(JSON.parse(enArr));
        console.log(JSON.parse(enObj));
    }


</script>

</html>